/**
 * 组件代码
 */
Vue.component('comSougnArea', {
    name: 'comSougnArea',
    props: ['config', 'data'],
    data: function () {
        return {
            boxShowValue: {
                type1: "0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%)",
                type2: "0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)",
                type3: "0 3px 3px -2px rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 12%)",
                type4: "0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%)",
                type5: "0 3px 5px -1px rgb(0 0 0 / 20%), 0 5px 8px 0 rgb(0 0 0 / 14%), 0 1px 14px 0 rgb(0 0 0 / 12%)",
                type6: "0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%)",
                type7: "0 4px 5px -2px rgb(0 0 0 / 20%), 0 7px 10px 1px rgb(0 0 0 / 14%), 0 2px 16px 1px rgb(0 0 0 / 12%)",
                type8: "0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%)"
            }
        }
    },
    computed: {
        myConfig: function () {
            var data = {};
            for (var item of this.config) {
                data[item.id] = item.value;
            }
            var defaultV = {
                borderRadius: data.radio + 'px',
                backgroundColor: data.bgcColor,
                borderWidth : data.borderWidth  + "px",
                borderColor: data.borderColor,
                borderStyle:data.borderStyle,
                backgroundImage: 'linear-gradient('+data.deg+'deg,'+data.beginColor+','+data.endColor+')',
            boxShadow: this.boxShowValue["type" + data.boxshow],
                width: '100%',
                height: '100%'
            };
            return defaultV;
        },
    },
    watch: {
        data: function (oldValue, newValue) {
            this.dataChange();
        }
    },
    mounted() {
        this.dataChange();
    },
    methods: {
        dataChange: function () {
            var data = window.getValue(this.myConfig.data);
            if (typeof (data[0]) == 'string') {
                this.content = data[0];
            } else if (data[0] != undefined && data[0][0] != undefined) {
                this.content = data[0][0];
            } else {
                this.content = "";
            }
        }
    },
    template: `
      <div :style="myConfig"></div>`,
});
/**
 * 配置项
 * @type {{name: string, id: string, type: string, value: string}[]}
 */
var comSougnAreaConfig = [{
    name: "背景色",
    type: "color",
    value: "#eee",
    id: "bgcColor"
},{
    name: "渐变开始颜色",
    type: "color",
    value: "#eee",
    id: "beginColor"
},{
    name: "渐变结束颜色",
    type: "color",
    value: "#eee",
    id: "endColor"
},{
    name: "渐变角度",
    type: "size",
    value: "0",
    id: "deg"
}, {
    name: "圆弧",
    type: "size",
    value: 0,
    id: "radio"
}, {
    name: "边框尺寸",
    type: "size",
    value: 0,
    id: "borderWidth"
}, {
    name: "边框样式",
    type: "select",
    value: "solid",
    id: "borderStyle",
    config: [{
        value: 'none',
        label: '定义无边框'
    }, {
        value: 'hidden',
        label: '影藏'
    }, {
        value: 'dotted',
        label: '虚线'
    }, {
        value: 'solid',
        label: '实线'
    }, {
        value: 'double',
        label: '双线'
    }]
}, {
    name: "边框颜色",
    type: "color",
    value: "",
    id: "borderColor"
}, {
    name: "阴影",
    type: "select",
    config: [{
        value: '1',
        label: '层级1'
    }, {
        value: '2',
        label: '层级2'
    }, {
        value: '3',
        label: '层级3'
    }, {
        value: '4',
        label: '层级4'
    }, {
        value: '5',
        label: '层级5'
    }, {
        value: '6',
        label: '层级6'
    }, {
        value: '7',
        label: '层级7'
    }, {
        value: '8',
        label: '层级8'
    }],
    value: "",
    id: "boxshow"
}]
